<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="绩效配置" data-page-identification="g_830ufs8aet">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_6g4wej224b 自定义模板_txlnhurp1e -->
            <div class="body">
                <div class="top-tab">
                    <a-tabs v-model:activeKey="activeKey" @change="tabChange">
                        <a-tab-pane key="项目目标" tab="项目目标" />
                        <a-tab-pane key="员工绩效设置" tab="员工绩效设置" />
                      <a-tab-pane key="项目完成系数" tab="项目完成系数" />
                    </a-tabs>
                    <div class="save-btn">
                        <a-button
                            type="primary"
                            v-if="activeKey === '项目目标'"
                            @click="submitComplete"
                            :loading="state.okLoading"
                            v-permission="'3000001093_vid_f474iqmj5j'"
                            >保存项目目标</a-button
                        >
                        <a-button
                            type="primary"
                            v-if="activeKey === '项目完成系数'"
                            @click="submitComplete"
                            :loading="state.okLoading"
                            v-permission="'3000001093_vid_bv6ql52jgn'"
                            >保存项目完成系数</a-button
                        >
                    </div>
                </div>
                <div class="content">
                    <template v-if="activeKey === '项目目标'">
                        <a-table
                            :columns="columns"
                            :data-source="state.treeData"
                            bordered
                            class="jx-table"
                            :rowKey="record => record.projectId"
                            :scroll="{ y: state.tableHeight }"
                            :loading="treeLoading"
                            :pagination="false"
                        >
                            <template
                                #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                            >
                                <div style="padding: 8px">
                                    <a-input
                                        ref="searchInput"
                                        :placeholder="`Search ${column.dataIndex}`"
                                        :value="selectedKeys[0]"
                                        style="width: 188px; margin-bottom: 8px; display: block"
                                        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                                        @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
                                    />
                                    <a-button
                                        type="primary"
                                        size="small"
                                        style="width: 90px; margin-right: 8px"
                                        @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
                                    >
                                        <template #icon><SearchOutlined /></template>
                                        Search
                                    </a-button>
                                    <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
                                        Reset
                                    </a-button>
                                </div>
                            </template>
                            <template #customFilterIcon="{ filtered }">
                                <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
                            </template>
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex === 'flag'">
                                    <a-radio-group v-model:value="record.flag" v-if="!record.disabled">
                                        <a-radio value="是">是</a-radio>
                                        <a-radio value="否">否</a-radio>
                                    </a-radio-group>
                                    <span v-else> </span>
                                </template>
                                <template v-if="column.dataIndex === 'teamLeader'">
                                    <a-select
                                        v-if="!record.disabled"
                                        style="width: 100%"
                                        :options="teamLeaderList"
                                        :allowClear="true"
                                        mode="multiple"
                                        :placeholder="selectHolder"
                                        :dropdownMatchSelectWidth="true"
                                        :showSearch="true"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        :showArrow="true"
                                        v-model:value="record.teamLeaderList"
                                    />
                                </template>
                                <template v-if="column.dataIndex === 'createUserIds'">
                                    <a-select
                                        v-if="!record.disabled"
                                        style="width: 100%"
                                        :options="peopleList"
                                        :allowClear="true"
                                        mode="multiple"
                                        :placeholder="selectHolder"
                                        :dropdownMatchSelectWidth="true"
                                        :showSearch="true"
                                        :filterOption="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        :showArrow="true"
                                        v-model:value="record.createUserIds"
                                    />
                                </template>
                            </template>
                        </a-table>
                    </template>
                    <template v-if="activeKey === '项目完成系数'">
                        <div class="modal-top-complete">
                            <a-row :gutter="24">
                                <a-col :span="6" style="height: 32px; margin-bottom: 8px">
                                    <a-form-item label="月份">
                                        <a-date-picker
                                            v-model:value="state.filter.month"
                                            picker="month"
                                            value-format="YYYY-MM"
                                            style="width: 100%"
                                            :allowClear="false"
                                            @change="getComplete"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="6" style="height: 32px; margin-bottom: 8px">
                                    <a-form-item label="项目名称">
                                        <a-input
                                            :placeholder="inputHolder"
                                            v-model:value="state.filter.projectName"
                                            @change="throttledGetComplete"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </div>
                        <a-table
                            :columns="completeColumns"
                            :data-source="state.treeData"
                            bordered
                            class="jx-table"
                            :rowKey="record => record.projectId"
                            :scroll="{ y: state.tableHeight - 50 }"
                            :loading="treeLoading"
                            :pagination="false"
                        >
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex === 'finishCoefficient'">
                                    <a-input-number
                                        v-if="!record.disabled"
                                        style="width: 100%"
                                        v-model:value="record.finishCoefficient"
                                        :min="0"
                                        :step="0.01"
                                        :precision="2"
                                        placeholder="请输入(支持两位小数)"
                                    />
                                </template>
                            </template>
                        </a-table>
                    </template>
                    <template v-if="activeKey === '员工绩效设置'">
                        <a-row>
                            <a-col :span="6" style="height: 32px; margin-bottom: 16px">
                                <a-form-item label="月份">
                                    <a-date-picker
                                        v-model:value="state.performanceFilter.month"
                                        picker="month"
                                        value-format="YYYY-MM"
                                        style="width: 100%"
                                        :allowClear="false"
                                        @change="getPeopleSetting"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <div class="top-card">
                            <a-card class="mb-4">
                                <template #title>
                                    <div class="card-title">评分起止时间</div>
                                </template>
                                <a-form :model="state.scoreModel">
                                    <a-row :gutter="24">
                                        <a-col :span="8">
                                            <a-form-item label="团队负责人评分起止时间">
                                                <a-range-picker
                                                    show-time
                                                    v-model:value="state.scoreModel.dateTime"
                                                    value-format="YYYY-MM-DD HH:mm:ss"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-form-item label="领导评分起止时间">
                                                <a-range-picker
                                                    show-time
                                                    v-model:value="state.scoreModel.leaderDateTime"
                                                    value-format="YYYY-MM-DD HH:mm:ss"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col
                                            :span="8"
                                            style="display: flex; justify-content: end; align-items: start"
                                        >
                                            <a-form-item label="">
                                                <a-button
                                                    type="primary"
                                                    :loading="state.peopleLoading1"
                                                    v-permission="'3000001155_vid_ew11uydj3u'"
                                                    @click="submitTime"
                                                    >确定</a-button
                                                >
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </a-form>
                            </a-card></div
                        >

                        <div class="bottom-card">
                            <a-card class="mb-4">
                                <template #title>
                                    <div class="card-title">通知设置</div>
                                </template>
                                <a-form :model="state.noticeModel" layout="vertical">
                                    <a-form-item label="团队负责人投入度、贡献度通知文案">
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.noticeModel.description1"
                                            rows="4"
                                        />
                                    </a-form-item>
                                    <div class="text-right">
                                        <a-button
                                            type="primary"
                                            v-permission="'3000001155_vid_1e3v9isr18'"
                                            :loading="state.peopleLoading2"
                                            @click="submitNotice('团队负责人')"
                                            >发布</a-button
                                        >
                                    </div>
                                    <a-form-item label="主管评分通知文案">
                                        <a-textarea
                                            :placeholder="inputHolder"
                                            v-model:value="state.noticeModel.description2"
                                            rows="4"
                                        />
                                    </a-form-item>
                                    <div class="text-right">
                                        <a-button
                                            type="primary"
                                            v-permission="'3000001155_vid_6r5uc4h3yf'"
                                            @click="submitNotice('主管')"
                                            :loading="state.peopleLoading3"
                                            >发布</a-button
                                        >
                                    </div>
                                </a-form>
                            </a-card>
                        </div>
                    </template>
                </div>
            </div>

            <!-- end vid_6g4wej224b 自定义模板_txlnhurp1e -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getTreeData()
        getAllJfPeople()
        const lastMonth = dayjs().subtract(1, 'month').format('YYYY-MM')
        state.filter.month = lastMonth
        state.performanceFilter.month = lastMonth
    })
    const headerOffset = ref(50)
    const calcTableHeight = () => {
        state.tableHeight = window.innerHeight - 180 - headerOffset.value
    }

    onMounted(() => {
        calcTableHeight()
        window.addEventListener('resize', calcTableHeight)

        document.addEventListener('click', e => {
            const target = e.target as HTMLElement
            if (target.tagName === 'IMG' && target.classList.contains('previewable-image')) {
                const imgUrl = target.getAttribute('src')
                if (imgUrl) {
                    // 预览逻辑，如弹窗显示 imgUrl
                    previewImage(imgUrl)
                }
            }
        })
    })

    onBeforeUnmount(() => {
        window.removeEventListener('resize', calcTableHeight)
    })
    const selectHolder = '请选择'
    const inputHolder = '请输入'
    const activeKey = ref('项目目标')
    const state = reactive({
        treeData: [],
        tableHeight: 600,
        filter: {
            month: undefined,
            projectName: ''
        },
        performanceFilter: {
            month: undefined
        },
        scoreModel: {
            dateTime: [],
            leaderDateTime: []
        },
        noticeModel: {
            description1: undefined,
            description2: undefined
        },
        peopleLoading1: false,
        peopleLoading2: false,
        peopleLoading3: false,
        okLoading: false,
        projectList: []
    })
    function normalizeTree(data) {
        return data.map(item => {
            const newItem = { ...item }
            if (newItem.children && newItem.children.length > 0) {
                newItem.children = normalizeTree(newItem.children)
            } else {
                // ⚠️ 去掉 children 或设为 undefined/null
                delete newItem.children
            }
            return newItem
        })
    }

    const treeLoading = ref(false)
    async function getTreeData() {
        try {
            treeLoading.value = true
            const response = await get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get_all_project_tree')
            if (response.code !== 200) {
                message.error(response.message)
                return null // 返回 null，表示获取数据失败
            }
            state.treeData = normalizeTree(response.data)
            return normalizeTree(response.data) // 返回数据
        } catch (error) {
            message.error(error)
            return null // 返回 null，表示发生错误
        } finally {
            treeLoading.value = false
        }
    }
    const peopleList = ref([])
    function getAllJfPeople() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
            peopleList.value = data.userDtoList.map(item => {
                return {
                    label: item.name,
                    value: item.id
                }
            })
            teamLeaderList.value = data.userDtoList.map(item => {
                return {
                    label: item.name,
                    value: item.name
                }
            })
        })
    }
    const teamLeaderList = ref([])
    const columns = ref([
        {
            title: '项目名称',
            dataIndex: 'projectName',
            align: 'left'
        },
        {
            title: '是否支持创建月度目标',
            dataIndex: 'flag',
            align: 'center',
            width: 200
        },
        {
            title: '团队负责人',
            dataIndex: 'teamLeader',
            align: 'center',
            width: 200
        },
        {
            title: '目标创建人',
            dataIndex: 'createUserIds',
            align: 'center'
        }
    ])
    const completeColumns = ref([
        {
            title: '项目名称',
            dataIndex: 'projectName',
            width: 200,
            align: 'left'
        },
        {
            title: '完成系数',
            dataIndex: 'finishCoefficient',
            width: 200,
            align: 'left'
        }
    ])
    async function getComplete() {
        try {
            treeLoading.value = true
            const response = await get(
                `/solution-ppm/api/v2/built-in-system-ppm/pmgf/get_goals_finish_coefficient/${state.filter.month}?projectName=${state.filter.projectName}`
            )
            if (response.code !== 200) {
                message.error(response.message)
                return null // 返回 null，表示获取数据失败
            }
            state.treeData = normalizeTree(response.data)
            return normalizeTree(response.data) // 返回数据
        } catch (error) {
            message.error(error)
            return null // 返回 null，表示发生错误
        } finally {
            treeLoading.value = false // 无论成功还是失败，最终都设置为 false，表示加载结束
        }
    }
    function tabChange() {
        if (activeKey.value === '项目目标') {
            getTreeData()
        } else if (activeKey.value === '项目完成系数') {
            getComplete()
        } else if (activeKey.value === '员工绩效设置') {
            getPeopleSetting()
        }
    }
    function throttleNew(fn, delay = 800) {
        let last = 0
        return function (...args) {
            const now = Date.now()
            if (now - last > delay) {
                last = now
                fn.apply(this, args)
            }
        }
    }
    const throttledGetComplete = throttleNew(getComplete, 800)
    //     保存完成系数
    function submitComplete() {
        state.okLoading = true
        if (activeKey.value === '项目完成系数') {
            put(
                `/solution-ppm/api/v2/built-in-system-ppm/pmgf/modify_goals_finish_coefficient/${state.filter.month}`,
                state.treeData
            )
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    getComplete()
                    message.success(data.message)
                })
                .finally(() => {
                    state.okLoading = false
                })
        } else {
            put('/solution-ppm/api/v2/built-in-system-ppm/pmgf/modify_project_config', state.treeData)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    getTreeData()
                    message.success(data.message)
                })
                .finally(() => {
                    state.okLoading = false
                })
        }
    }
    function getPeopleSetting() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/parameter/time_control/${state.performanceFilter.month}`).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                state.scoreModel.dateTime = data.data?.teamLeaderTimeList || undefined
                state.scoreModel.leaderDateTime = data.data?.leaderRatingTimeList || undefined
                state.noticeModel.description1 = data.data?.teamLeaderMessage || undefined
                state.noticeModel.description2 = data.data?.leaderRatingMessage || undefined
                state.peopleId = data.data?.id
            }
        )
    }
    function submitNotice(type) {
        if (type === '主管') {
            state.peopleLoading3 = true
        } else {
            state.peopleLoading2 = true
        }
        const messageMap = {
            '主管': state.noticeModel.description2,
            '团队负责人': state.noticeModel.description1
        }
        const typeMap = {
            '主管': 'LEADER_RATING',
            '团队负责人': 'TEAM_LEADER'
        }
        put(`/solution-ppm/api/v2/built-in-system-ppm/performance_investment/push_notify_message`, {
            'month': state.performanceFilter.month,
            'message': messageMap[type],
            'type': typeMap[type],
            id: state.peopleId ? state.peopleId : undefined
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getPeopleSetting()
            })
            .finally(() => {
                state.peopleLoading2 = false
                state.peopleLoading3 = false
            })
    }
    function submitTime() {
        state.peopleLoading1 = true
        put(`/solution-ppm/api/v2/built-in-system-ppm/parameter/time_control`, {
            month: state.performanceFilter.month,
            teamLeaderTimeList: state.scoreModel.dateTime,
            leaderRatingTimeList: state.scoreModel.leaderDateTime,
            id: state.peopleId ? state.peopleId : undefined
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                getPeopleSetting()
            })
            .finally(() => {
                state.peopleLoading1 = false
            })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .jx-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .body {
        height: 100%;
        padding: 0 24px 24px 24px;
        background-color: #fff;
    }
    .top-tab {
        position: relative;
    }
    .save-btn {
        position: absolute;
        right: 16px;
        top: 8px;
    }
    .modal-top-complete {
        margin-bottom: 16px;
    }
    .title-tip {
        border-left: 4px solid #3875ff;
        height: 14px;
        font-size: 14px;
        line-height: 14px;
        padding-left: 4px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    .top-title {
        margin: 4px 0;
    }
    .mb-4 {
        margin-bottom: 16px;
    }
    .text-right {
        text-align: right;
    }
    .content {
        height: calc(100% - 50px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    :deep(.ant3-card-head-title) {
        background-color: #f2f6fc;
        color: #333 !important;
        border-right: 1px solid #e3eeff;
        border-bottom: 1px solid #e3eeff;
        padding-left: 16px;
    }
    :deep(.ant3-card-head) {
        padding: 0;
    }
    .top-card :deep(.ant3-card-body) {
        padding: 26px 16px 0 16px;
    }
    .bottom-card :deep(.ant3-card-body) {
        padding: 16px;
    }
    .card-title {
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        height: 14px;
        line-height: 14px;
    }
</style>
